<template>
  <div class="user">
    <div class="search-area">
      <!-- 搜索区域 -->
      <page-search @newSearchEvent="handlerSearch" :searchFormConfig="searchFormConfig"></page-search>
    </div>
    <div class="content">
      <!-- 信息展示区域 -->
      <page-table
        ref="pageTableRef"
        :pageTabelConfig="pageTabelConfig"
        pageName="User"
        @pageTableEvent="handlerDialog"
        @showEmptyDialog="handlerDialog"
      ></page-table>
    </div>

    <!-- dialog对话框 -->
    <page-dialog pageName="User" :editDialogFormConfig="editDialogFormConfigRef" ref="pageDialogRef"></page-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue"
import { useStore } from "vuex"
import PageSearch from "@/components/page-search"
import PageTable from "@/components/page-table"

import { searchFormConfig } from "@/views/main/system/user/config/search.config"
import { pageTabelConfig } from "@/views/main/system/user/config/tabel.config"

import { pageTableRef, handlerSearch } from "@/hook/usePageSearch"

import PageDialog from "@/components/page-dialog"
import { editDialogFormConfig } from "@/views/main/system/user/config/editDialog.config"
import { handlerDialog, pageDialogRef } from "@/hook/usePageDialog"
export default defineComponent({
  name: "user",
  components: {
    PageSearch,
    PageTable,
    PageDialog,
  },
  setup() {
    const store = useStore()
    const editDialogFormConfigRef = computed(() => {
      // 动态添加从vuex中获取的部门赋值到 空的列表中
      const departmentFormItem = editDialogFormConfig.searchFormItems.find((item) => item.field == "departmentId")
      departmentFormItem!.options = store.state.departmentList.map((item: any) => {
        return { name: item.name, value: item.id }
      })

      // 动态添加角色,从vuex中获取角色赋值到 列表中
      const rolesFormItem = editDialogFormConfig.searchFormItems.find((item) => item.field == "roleId")
      rolesFormItem!.options = store.state.rolesList.map((item: any) => {
        return { name: item.name, value: item.id }
      })
      return editDialogFormConfig
    })

    return {
      searchFormConfig,
      pageTabelConfig,
      handlerSearch,
      pageTableRef,
      editDialogFormConfigRef,
      PageDialog,
      handlerDialog,
      pageDialogRef,
    }
  },
})
</script>

<style lang="less" scoped>
.user {
  border-radius: 4px;
  .search-area {
    padding-right: 15px;
  }
}
.content {
  border-top: 15px solid #f2f6ff;
}
</style>
